<template>
  <el-container>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <el-table-column v-for="(item, index) in tableConfig" 
        :prop="item.prop"
        :label="item.label"
        :width="item.width || 180">
      </el-table-column>
      <el-table-column v-if="!hiddenHandle"
        :label="tableHandle.label">
        <template slot-scope="scope">
          <el-button 
            v-for="(item, index) in tableHandle.handle"
            @click="handleClick(scope.row, item)" type="text" size="small">{{item.text}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-container>
</template>

<script>
  /**
   * 列表组件， 主要展示列表信息。
   * 必传参数tableConfig（配置项）、 tableData（列表数据）
   * 选传参数 tableHandle（操作配置）， 如果需要增删改查，需要此参数配置
   */
  export default {
    data() {
      return {
        name: 'class'
      }
    },
    methods: {
      handleClick(item, handle) {
        this.$emit(handle.callback, {
          item,
          type: handle.type
        })
      }
    },
    mounted() {
      console.log(this.tableConfig)
    },
    props: {
      // table数据
      tableData: {
        type: Array,
        default: []
      },
      // table列的展示配置
      tableConfig: {
        type: Array,
        required: true
      },
      // 操作
      tableHandle: {
        type: Object,
        default: {
          label: '操作',
          handle: [
            {
              text: '查看',
              type: 'check',
              callback: 'handleClick'
            },
            {
              text: '编辑',
              type: 'edit',
              callback: 'handleClick'
            },
            {
              text: '删除',
              type: 'remove',
              callback: 'handleClick'
            },
          ]
        }
      },
      hiddenHandle: {
        type: Boolean,
        default: false
      }

    }
  }
</script> 